<template>
  <div class="preview">
    <!-- 预览界面 -->
    <div>
    <van-nav-bar 
      title="预览"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    </div>
    
      <div class="content">
        <div class="background">
          
          <!-- 选用的背景图片 -->
          <van-image
            width="80%"
            height="100%"
            :src='backgroundImage'
          />
        </div>
        <div class="audio" style="width:100%">
          <audio ref="audioPlayer" :src="audio" controls style="width:100%"></audio>
        </div>
      </div>
      <div class="footer">
        
        
          <van-button round block type="primary" native-type="submit" style="width:30%; margin:auto ; "
          @click="submit">
          提交
        </van-button>
        
          
        
        
        </div>
        <!-- 返回页面继续编辑，暂时无功能 -->
        <div class="footer1">
        
          <van-button round block type="primary" native-type="submit" style="width:30%; margin:auto ;"
          @click="back">
            继续编辑
          </van-button>
          
        
      
      </div>
    </div>
  </template>
  
  <script>
  
  import {mapState} from 'vuex';

  export default {
    //test
    computed: {
    ...mapState(
      ['giftName','backgroundImage','audio']
    )
  },
  mounted() {
    console.log('giftName:', this.giftName)
  },

    props: {
      backgroundUrl: {
        type: String,
        default: '',
      },
      audioUrl: {
        type: String,
        default: '',
      },
    },
    methods: {
      onClickLeft(){
        history.back()
      },
      playAudio() {
        const audio = this.$refs.audio
        audio.play()
      },
      back(){
        history.back();
      },
      submit(){
        this.$router.push('/user')
      }
    },
  }
  </script>
  
  <style lang="less" scoped>
  
  
  .preview {
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // width: 100%;
    // height: 100%;
    // min-height: 100vh;
    // background-color: #f1f1f1;
    // padding: 0px;
    width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  }
  
  .header {
    margin: 20px;
    font-size: 24px;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 30%;
    width: 100%;
    
  }
  
  .background {
    width: 100%;
    // height: 30%;
    background-size: cover;
    background-position: center;
    margin-bottom: 10%;
    margin-top:25%;
  }
  
  .audio {
    margin: 20px;
    margin-top:10%;
  }
  
  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
    
  }
  .footer1 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  .van-button {
    margin: 0 10px;
  }
  </style>
  